<!DOCTYPE html>
<html class="articles-doc articles-doc-show" lang="zh-cn" xml:lang="zh-cn">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <script src="./assets/jquery.min.js"></script>
  <script>
  var buckets = [];
  var currentMonth = '';
  
  $(function(){
    // 设置默认月份为当前月份
    var today = new Date();
    var year = today.getFullYear();
    var month = (today.getMonth() + 1).toString().padStart(2, '0');
    currentMonth = year + month;
    document.getElementById('month').value = year + '-' + month;
    
    // 显示当前查询的月份
    updateMonthDisplay(currentMonth);
    
    // 初始化存储桶列表
    initbuckets();
  });
  
  var loadimg = '<img src="./assets/ajax-loader.gif" style="width:20px"/>';
  
  // 更新月份显示
  function updateMonthDisplay(monthValue) {
    var year = monthValue.substring(0, 4);
    var month = monthValue.substring(4, 6);
    $('#currentMonth').text('当前显示: ' + year + '年' + month + '月');
  }
  
  // 按月份查询
  function queryByMonth() {
    var monthInput = document.getElementById('month').value;
    if(monthInput) {
      // 转换格式：从 YYYY-MM 到 YYYYMM
      currentMonth = monthInput.replace('-', '');
      updateMonthDisplay(currentMonth);
      
      // 清空表格并重新加载数据
      $('.tbody').html('<tr><td colspan="7"><div style="text-align: center;"><img src="./assets/ajax-loader.gif" /></div></td></tr>');
      initbuckets();
    } else {
      alert('请选择有效的月份');
    }
  }
  
  
  function initbuckets(){
    var url = "api.php";
    var query = new Object();
	query.act = 'buckets';
	$.ajax({
		url: url,
		data: query,
		type: "post",
		dataType: "json",
		success: function (res) {
			if(res.status==1){
			    buckets = res.list;
                $('.buckets').html("<p>找到 " + res.count+ " 个存储桶</p>");
                var html = '';
                for(var i in res.list){
                    html+='<tr class="b_'+res.list[i]+'"><td>'+res.list[i]+'</td><td>'+loadimg+'</td><td>'+loadimg+'</td><td>'+loadimg+'</td><td>'+loadimg+'</td><td>'+loadimg+'</td><td>'+loadimg+'</td></tr>';
                }
                $('.tbody').html(html);
                if(res.count>0)loopstatics(0);
			}else{
                $('.buckets').html(res.msg);
			}
		}
	});
  }
  function loopstatics(index){
    var bucket = buckets[index]?buckets[index]:'';
    if(bucket=='')return;
    
    var url = "api.php";
    var query = new Object();
	query.act = 'statics';
    query.bucket=bucket;
    query.month=currentMonth; // 添加月份参数
	$.ajax({
		url: url,
		data: query,
		type: "post",
		dataType: "json",
		success: function (res) {
            setTimeout(()=>{
                index++;
                loopstatics(index);
            },1000);
			if(res.status==1){
			    var info = res.list;
                var html = '';
                html+='<td>'+bucket+'</td>';
                html+='<td>'+info.count+'</td>';
                html+='<td>'+info.space+'</td>';
                html+='<td>'+info.flux+'</td>';
                html+='<td>'+info.cdn_flow_out+'</td>';
                html+='<td>'+info.hits+'</td>';
                html+='<td>'+info.put+'</td>';
                $('.b_'+bucket).html(html);
                
                // 更新月份显示（仅在第一个存储桶数据加载时）
                if(index === 0 && info.month) {
                    $('#currentMonth').text('当前显示: ' + info.month);
                }
			}else{
                alert(res.msg);
			}
		}
	});
  }
  </script>
  <style>
    .table-container {
      margin-bottom: 30px;
    }
    .table-title {
      font-size: 18px;
      font-weight: bold;
      margin: 20px 0 10px 0;
    }
  </style>
</head>
<body>
<h1>七牛云存储桶统计信息</h1>

<div style="margin-bottom: 20px;">
  <label for="month">选择月份：</label>
  <input type="month" id="month" name="month" value="" style="padding: 5px;">
  <button onclick="queryByMonth()" style="padding: 5px 10px; margin-left: 10px; cursor: pointer;">查询</button>
  <span id="currentMonth" style="margin-left: 15px; font-weight: bold;"></span>
</div>

<div class="buckets">


</div>

<div class="table-container">
    <div class="table-title">存储桶基本统计</div>
    <!-- 显示存储桶统计信息表格-->
    <table border='1' cellpadding='5' style='border-collapse: collapse; width: 100%;'>
    <tr style='background-color: #f2f2f2;'>
    <th>存储桶名称</th>
    <th>文件数量</th>
    <th>存储量</th>
    <th>外网流出流量</th>
    <th>CDN回源流量</th>
    <th>总请求次数</th>
    <th>PUT请求次数</th>
    </tr>
    <tbody class="tbody">
    <tr>
    <td colspan="7" >
    <div style="text-align: center;"><img src="./assets/ajax-loader.gif" /></div>
    </td>
    </tr>
    </tbody>
    </table>
</div>

<div style='margin-top: 20px; padding: 10px; background-color: #f8f8f8; border: 1px solid #ddd;'>
<h3>使用说明</h3>
<p>1. 请在脚本开头填写您的七牛云AccessKey和SecretKey</p>
<p>2. 默认显示本月的统计数据，可以通过上方的月份选择器查询其他月份的数据</p>
<p>3. 统计数据包括：存储量、文件数量、外网流出流量、CDN回源流量、总请求次数和PUT请求次数</p>
<p>4. 数据单位：存储量和流量自适应单位，请求次数为实际次数</p>
<p>5. 注意：七牛云API要求日期格式为YmdHis（年月日时分秒），例如20250906000000</p>
<p>6. 本脚本已在统计数据API请求中添加X-Qiniu-Date请求头，符合七牛云API的要求</p>
</div>
</body></html>